// 背景
.not-bg {
  background-color: transparent !important;
}

.bg-yellow {
  background-color: @yellow !important;
}

.bg-light-blue {
  background-color: lighten(@blue, 15%) !important;
}

.bg-blue {
  background-color: @blue !important;
}

.bg-deep-blue {
  background-color: darken(@blue, 20%) !important;
}

.bg-light-orange {
  background-color: lighten(@orange, 5%) !important;
}

.bg-orange {
  background-color: @orange !important;
}

.bg-deep-orange {
  background-color: darken(@orange, 20%) !important;
}

.bg-green {
  background-color: @green !important;
}

.bg-deep-green {
  background-color: green !important;
}

.bg-purple {
  background-color: @purple !important;
}

.bg-red {
  background-color: @red !important;
}

.bg-pink {
  background-color: lighten(@red, 10%) !important;
}

.bg-white {
  background-color: @white !important;
}

.bg-light {
  background-color: @bg-light !important;
}

.bg-gray {
  background-color: @bg-container !important;
}

// 颜色
.bg-transparent {
  color: transparent;
}

.font-default {
  color: @defaultFont;
}

.font-disabled {
  color: #ddd;
}

.font-gray {
  color: @grayFont;
}

.font-light-gray {
  color: @deepBorder;
}

.font-blue {
  color: @blue;
}

.font-blue-light {
  color: @blue-light;
}

.font-orange {
  color: @orange;
}

.font-green {
  color: @green;
}

.font-light-green {
  color: #45eb8b;
}

.font-deep-green {
  color: darken(@green, 5%);
}

.font-red {
  color: @red;
}

.font-pink {
  color: #ff5d5d;
}

.font-yellow {
  color: @yellow;
}

.font-purple {
  color: @purple;
}

.font-white {
  color: @white;
}

.font-border {
  color: @deepBorder;
}

.link {
  color : @blue;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

// 字体大小
.normal {
  font-size: 12px;
}

.big {
  font-size: 14px;
}

.x-big {
  font-size: 16px;
}

.xx-big {
  font-size: 18px;
}

.max-big {
  font-size: 22px;
}

// 文字粗体
.bold {
  font-weight: bold;
}

// 布局
.between {
  .flexBetween();
}

.fleft {
  .flexLeft();
}

.center {
  .center();
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear {
  overflow: hidden;
}

.hidden {
  display: none !important;
}
.db {
  display: inline-block;
  min-width: @size * .6;
}
// 文本对其
.tc {
  text-align: center;
}

.tl {
  text-align: left !important;
}

.tr {
  text-align: right;
}

.middle {
  vertical-align: middle;
}

// 边框
.border {
  .border()
}

.borderT {
  .borderTop()
}

.borderR {
  .borderRight()
}

.borderB {
  .borderBottom()
}

.borderL {
  .borderLeft()
}


// 间距
.ms {
  margin: @space;
}

.ml {
  margin-left: @space;
}

.mr {
  margin-right: @space;
}

.mr5 {
  margin-right: @space / 2;
}
.ml5 {
  margin-left: @space / 2;
}
.mt {
  margin-top: @space;
}

.mt5 {
  margin-top: @space / 2;
}

.mb {
  margin-bottom: @space;
}
.mb20 {
  margin-bottom: @space * 2;
}
.ml20 {
  margin-left: @space * 2;
}
.mb5 {
  margin-bottom: @space / 2;
}

.ps {
  padding: @space;
}

.pl {
  padding-left: @space;
}
.pl20 {
  padding-left: @space * 2;
}

.pt {
  padding-top: @space;
}

.pr {
  padding-right: @space;
}

.pb {
  padding-bottom: @space;
}

.pt70 {
  padding-top: @size * .7;
}

.nmb {
  margin-bottom: 0 !important;
}

.wp20 {
  width: 20% !important;
}

.wp30 {
  width: 30% !important;
}

.wp40 {
  width: 40% !important;
}

.wp80 {
  width: 80% !important;
}

.wp90 {
  width: 90% !important;
}

.wp100 {
  width: 100% !important;
}

.w100 {
  width: 100px;
}

.w150 {
  width: 150px !important;
}

.w260 {
  width: 260px !important;
}

.w400 {
  width: 400px;
}

.w500 {
  width: 500px;
}

.mw90 {
  max-width: 90%;
}

.empty {
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
  position : absolute;
}

.img-upload-box {
  width   : @size * .7;
  height  : @size * .7;
  position: relative;
  .flexCenter();

  img {
    max-width : 100%;
    max-height: 100%;
  }

  .close {
    top             : -@space;
    right           : -@space;
    background-color: @white;
    .radius();
    position: absolute;
    cursor  : pointer;
  }
}

.upload-icon {
  width : @size * .7;
  height: @size * .7;
  border: 1px dotted @deepBorder;
  .flexCenter();

  .icon {
    font-size: 3em;
  }
}

.line-through {
  text-decoration: line-through;
}

.h400 {
  max-height: @size * 4;
}

.h500 {
  max-height: @size * 5;
}

.ht400 {
  // 高度设置
  height: @size * 4;
}

.ht300 {
  height: @size * 3;
}

.ht200 {
  height: @size * 2;
}

.scroll {
  overflow: auto;
}
.flexL {
  .flexLeft();
}